<script setup>

import { ref, toRefs, reactive, computed } from 'vue'
import api from '@/api'

const 
    tableRef = ref()

const 
    emit = defineEmits(['handleClick', 'changeState'])

const
    props = defineProps({
        status: {
            type: String,
            default: '0'
        }
    })

const handleCurrentChange = (currentRow, oldCurrentRow) => {
    let row = tableData.value.indexOf(currentRow)
    tableRef.value.setCurrentRow(currentRow)
    emit('changeState', 1)
    emit('handleClick', data.value[(page.value - 1) * numberPerPage + row])
}

const clearCurrent = () => {
    tableRef.value.setCurrentRow()
    emit('changeState', 0)
}

const formSearchDevice = reactive({
    code: '',
    supplier: '',
    name: '',
    mName: '',
    status: props.status
})


const data = ref([])

const
    tableData = ref([])


const onSubmit = () => {
    if(tableRef.value) {
        clearCurrent()
    }
    return new Promise((resolve, reject) => {
        // 更改分页，以及每页尺寸大小
        api.post('api/equipment/equipmentList', {
            ...formSearchDevice,
            page: 1,
            pageSize: Number.MAX_SAFE_INTEGER
        }).then(res => {
            data.value = res.d.records
            fillTable(page.value)

            resolve()
        }).catch(error => {
            data.value = []
            fillTable(page.value)
        })
    })
}

const numberPerPage = 10

const disabledPre = computed(() => (page.value === 1))
const disabledNext = computed(() => (page.value * numberPerPage >= data.value.length))

const
    page = ref(1)

const nextPage = () => {
    page.value ++

    fillTable(page.value)
}

const prePage = () => {
    page.value --

    fillTable(page.value)
}

// 这里要用深拷贝 否则 data和tableData 会同时改变
const fillTable = num => {
    tableData.value = JSON.parse(JSON.stringify([].slice.call(data.value, (num - 1) * numberPerPage, num * numberPerPage)))
    for(let d of tableData.value) {
        if(d.code.length > 7) {
            d.code = d.code.slice(0, 7) + '...'
        }
        if(d.supplier.length > 7) {
            d.supplier = d.supplier.slice(0, 7) + '...'
        }
    }
    console.log(data.value, tableData.value)
}

onSubmit()

const querySearch = key => ((queryString, cb) => {cb(Array.from(new Set(data.value.filter(d => (d[key].toString().match(new RegExp(queryString, 'gi')) !== null)).map(d => d[key]))).map(d => ({'value': d})).slice(0, 5))})

</script>

<template>
    <div id="numbereddevicecheckin">
        <div id="searchBarForm">
            <el-form :inline="true" :model="formSearchDevice" class="demo-form-inline" size="mini">
                <div class="outer">
                    <div class="left">
                        <el-form-item label="设备编号">
                            <el-autocomplete size="small" v-model="formSearchDevice.code" :fetch-suggestions="querySearch('code')" style="width: 70px" placeholder="输入编号" />
                        </el-form-item>
                        <el-form-item label="设备型号">
                            <el-autocomplete size="small" v-model="formSearchDevice.mName" :fetch-suggestions="querySearch('mName')" style="width: 70px" placeholder="输入型号" />
                        </el-form-item>
                        <el-form-item label="设备名称">
                            <el-autocomplete size="small" v-model="formSearchDevice.name" :fetch-suggestions="querySearch('name')" style="width: 80px" placeholder="输入名称" />
                        </el-form-item>
                        <el-form-item label="供应商">
                            <el-autocomplete size="small" v-model="formSearchDevice.supplier" :fetch-suggestions="querySearch('supplier')" style="width: 80px" placeholder="输入供应商" />
                        </el-form-item>
                        <el-form-item label="设备状态" >
                            <el-select size="small" v-model="formSearchDevice.status" style="width: 90px" placeholder="选择设备状态">
                                <el-option label="所有" value="0" />
                                <el-option label="已入库" value="1" />
                                <el-option label="已发放" value="2" />
                                <el-option label="已回收" value="3" />
                                <el-option label="已维修" value="4" />
                                <el-option label="已报废" value="5" /> 
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="right">
                        <div class="child">
                            <el-form-item>
                                <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
                            </el-form-item>                    
                        </div>
                        
                    </div>
                </div>
                

                    
            </el-form>
        </div>
  
        <el-table
            ref="tableRef"
            :data="tableData" :cell-style="rowClass"
            style="width: 100%;height:auto;font-size: 8px;"
            highlight-current-row
            @current-change="handleCurrentChange"
        >
            <el-table-column
                fixed
                prop="code"
                label="编号"
                width="100"
            />
            <el-table-column
                prop="name"
                label="名称"
                width="150"
            />
            <el-table-column
                prop="mName"
                label="型号"
                width="120"
            />
            <el-table-column
                prop="supplier"
                label="供应商"
                width="100"
            />
            <el-table-column
                prop="number"
                label="数量"
                width="60"
            />
            <el-table-column
                prop="unit"
                label="单位"
                width="60"
            />
            <el-table-column
                prop="createTime"
                label="入库时间"
                width="150"
            />
            <el-table-column
                prop="newOld"
                label="新旧程度"
                width="80"
            />
            <el-table-column
                prop="statusName"
                label="设备状态"
                width="80"
            />
            <el-table-column
                prop="checker"
                label="添加人"
                width="80"
            />
        </el-table>
        <div :style="{height: '50px', width: '100%', position: 'relative'}">
            <div style="height: 25px;
            width: 240px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
    
            font-size: 8px;">
                <span>第&nbsp;{{page}}&nbsp;页</span>
                <span>共&nbsp;{{ Math.ceil(data.length / numberPerPage) }}&nbsp;页   </span>
                
                
                <el-button-group size="small">
                    <el-button type="primary" @click="prePage" :disabled="disabledPre">上页</el-button>
                    <el-button type="primary" @click="nextPage" :disabled="disabledNext">下页</el-button>
                </el-button-group>  
            </div>
        </div>
            
    </div>
</template>

<style>
    .outer {
        display: flex;

        height: auto;
    }

    .left {
        flex: 1;
        font-size: 8px
    }

    .right {
        width: 80px;
        position: relative;
        margin-bottom: 10px;
    }

    .child {
        height: 30px;
        width: 100px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;

        font-size: 8px;
    }

    span {
        margin-right: 10px;
    }

   
    
</style>